<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>动画，转换和3D转换</title>
<style type="text/css" media="screen">
    body {
		background-color: black;
		color: white;
		font-family: 'Lucida Grande', Verdana, Arial;
		font-size: 12px;
		background-image: -webkit-gradient(radial,
		                        50% 500, 1,
		                        50% 500, 400,
		                        from(rgba(255, 255, 255, 0.3)),
		                        to(rgba(255, 255, 255, 0)));
		background-repeat: no-repeat;
    }
    #container {
	    width: 100%;
	    height: 700px;
	    -webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
	    -webkit-perspective-origin: 50% 225px;
    }
    #stage {
	    width: 100%;
	    height: 100%;
	    -webkit-transition: -webkit-transform 2s;
	    -webkit-transform-style: preserve-3d;
    }
    #shape {
      	position: relative;
      	top: 160px;
      	margin: 0 auto;
      	height: 200px;
      	width: 200px;
      	-webkit-transform-style: preserve-3d;
    }
    .plane {
      	position: absolute;
      	height: 200px;
      	width: 200px;
      	border: 1px solid white;
      	-webkit-border-radius: 12px;
      	-webkit-box-sizing: border-box;
      	text-align: center;
      	font-family: Times, serif;
      	font-size: 124pt;
      	color: black;
      	background-color: rgba(255, 255, 255, 0.6);
      	-webkit-transition: -webkit-transform 2s, opacity 2s;
      	-webkit-backface-visibility: hidden;
    }
    #shape.backfaces .plane {
      	-webkit-backface-visibility: visible;
    }
    #shape {
      	-webkit-animation: spin 8s infinite linear;
    }
    @-webkit-keyframes spin {
      	from { -webkit-transform: rotateY(0); }
      	to   { -webkit-transform: rotateY(-360deg); }
    }
    /* ---------- cube styles ------------- */
    .cube > .one {
      	opacity: 0.5;
      	-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(100px);
    }
    .cube > .two {
      	opacity: 0.5;
      	-webkit-transform: scale3d(1.2, 1.2, 1.2) translateZ(100px);
    }
    .cube > .three {
      	opacity: 0.5;
      	-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px);
    }
    .cube > .four {
      	opacity: 0.5;
      	-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(100px);
    }
    .cube > .five {
      	opacity: 0.5;
      	-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(100px);
    }
    .cube > .six {
      	opacity: 0.5;
      	-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(100px) rotate(180deg);
    }
    .cube > .seven {
      	-webkit-transform: scale3d(0.8, 0.8, 0.8) rotateX(90deg) translateZ(100px) rotate(180deg);
    }
    .cube > .eight {
      	-webkit-transform: scale3d(0.8, 0.8, 0.8) translateZ(100px);
    }
    .cube > .nine {
      	-webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(90deg) translateZ(100px);
    }
    .cube > .ten {
      	-webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(180deg) translateZ(100px);
    }
    .cube > .eleven {
      	-webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(-90deg) translateZ(100px);
    }
    .cube > .twelve {
      	-webkit-transform: scale3d(0.8, 0.8, 0.8) rotateX(-90deg) translateZ(100px);
    }
    /* ---------- ring styles ------------- */
    .ring > .one {
      	-webkit-transform: translateZ(380px);
    }
    .ring > .two {
      	-webkit-transform: rotateY(30deg) translateZ(380px);
    }
    .ring > .three {
      	-webkit-transform: rotateY(60deg) translateZ(380px);
    }
    .ring > .four {
      	-webkit-transform: rotateY(90deg) translateZ(380px);
    }
    .ring > .five {
      	-webkit-transform: rotateY(120deg) translateZ(380px);
    }
    .ring > .six {
      	-webkit-transform: rotateY(150deg) translateZ(380px);
    }
    .ring > .seven {
      	-webkit-transform: rotateY(180deg) translateZ(380px);
    }
    .ring > .eight {
      	-webkit-transform: rotateY(210deg) translateZ(380px);
    }
    .ring > .nine {
      	-webkit-transform: rotateY(-120deg) translateZ(380px);
    }
    .ring > .ten {
      	-webkit-transform: rotateY(-90deg) translateZ(380px);
    }
    .ring > .eleven {
      	-webkit-transform: rotateY(300deg) translateZ(380px);
    }
    .ring > .twelve {
      	-webkit-transform: rotateY(330deg) translateZ(380px);
    }
    .controls {
      	width: 80%;
      	margin: 0 auto;
      	padding: 5px 20px;
      	-webkit-border-radius: 12px;
      	background-color: rgba(255, 255, 255, 0.5);
    }
    .controls > div {
      	margin: 10px;
    }
</style>
<script type="text/javascript" charset="utf-8">
    function hasClassName(inElement, inClassName){
        var regExp = new RegExp('(?:^|\\s+)' + inClassName + '(?:\\s+|$)');
        return regExp.test(inElement.className);
    }
    function addClassName(inElement, inClassName){
        if (!hasClassName(inElement, inClassName))
            inElement.className = [inElement.className, inClassName].join(' ');
    }

    function removeClassName(inElement, inClassName){
        if (hasClassName(inElement, inClassName)) {
            var regExp = new RegExp('(?:^|\\s+)' + inClassName + '(?:\\s+|$)', 'g');
            var curClasses = inElement.className;
            inElement.className = curClasses.replace(regExp, ' ');
        }
    }
    function toggleClassName(inElement, inClassName){
        if (hasClassName(inElement, inClassName))
            removeClassName(inElement, inClassName);
        else
            addClassName(inElement, inClassName);
    }
    function toggleShape(){
      	var shape = document.getElementById('shape');
      	if (hasClassName(shape, 'ring')) {
        	removeClassName(shape, 'ring');
        	addClassName(shape, 'cube');
      	} else {
        	removeClassName(shape, 'cube');
        	addClassName(shape, 'ring');
      	}
    // Move the ring back in Z so it's not so in-your-face.
      	var stage = document.getElementById('stage');
      	if (hasClassName(shape, 'ring'))
        	stage.style.webkitTransform = 'translateZ(-200px)';
      	else
        	stage.style.webkitTransform = '';
    }
    function openGlim(){
    	var bodyelm=document.getElementsByTagName('body');
    	bodyelm[0].style.backgroundColor ="white";
    	console.log(bodyelm[0]);
    }
    function closeGlim(){
    	var bodyelm=document.getElementsByTagName('body');
    	bodyelm[0].style.backgroundColor ="black";
    	console.log(bodyelm[0]);
    }
    function toggleBackfaces(){
      	var backfacesVisible = document.getElementById('backfaces').checked;
      	var shape = document.getElementById('shape');
      	if (backfacesVisible)
        	addClassName(shape, 'backfaces');
      	else
        	removeClassName(shape, 'backfaces');
    }
</script>
</head>
<body>
<div class="controls">
	<h1>动画，转换和3D转换</h1>
	<p>这个演示展示了一些使用3D转换、动画和转换的更有趣的内容.注意，您仍然可以选择元素上的文本，即使它们正在旋转</p>
	
	<div><button onclick="toggleShape()">变形</button></div>
	<div><button onclick="openGlim()">开灯</button><button onclick="closeGlim()">关灯</button></div>
	<div><input type="checkbox" id="backfaces" onclick="toggleBackfaces()" checked><label for="backfaces">透明</label></div>
</div>

<div id="container">
	<div id="stage">
		<div id="shape" class="cube backfaces">
			<div class="plane one">1</div>
			<div class="plane two">2</div>
			<div class="plane three">3</div>
			<div class="plane four">4</div>
			<div class="plane five">5</div>
			<div class="plane six">6</div>
			<div class="plane seven">7</div>
			<div class="plane eight">8</div>
			<div class="plane nine">9</div>
			<div class="plane ten">10</div>
			<div class="plane eleven">11</div>
			<div class="plane twelve">12</div>
		</div>
		<p style="margin: -150px 0 0 200px;">说明：这个不是我写的，是网上找的，但是有些功能是我加上去的，点击上面的按钮，看看有什么变化</p>
	</div>
</div>
</body>
<script type="text/javascript" src="/public/js/footer.js"></script>
</html>
